<template>
  <div id="container">
    <el-row>
      <el-col :span="20">
        <el-descriptions class="margin-top" title="用户详情" :column="3" :size="size" border>
          <template slot="extra">
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-warning-outline"></i>
              用户编号
            </template>
            {{ currentUserInfo.uid }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              用户名
            </template>
            {{ currentUserInfo.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-date"></i>
              注册日期
            </template>
            {{ currentUserInfo.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-date"></i>
              出生日期
            </template>
            {{ currentUserInfo.birthday }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{ currentUserInfo.realName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-female"></i>
              性别
            </template>
            <el-tag size="small">{{ currentUserInfo.gender }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              电子邮箱
            </template>
            {{ currentUserInfo.email }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ currentUserInfo.mobile }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              联系地址
            </template>
            {{ currentUserInfo.province }}{{ currentUserInfo.city }}{{ currentUserInfo.zone }}&nbsp;&nbsp;{{currentUserInfo.street}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-postcard"></i>
              身份证号码
            </template>
            {{ currentUserInfo.idCard }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "details",
  data() {
    return {
      currentUserInfo: {}
    }
  },
  mounted() {
     this.initUpdateUserProfile();
  },
  methods: {
    initUpdateUserProfile() {
      this.$store.dispatch('user/queryUserProfile', this.$route.query.uid).then(resp => {
        if (resp.code === 200) {
          this.currentUserInfo = resp.data;
          console.log("---------要更新的用户资料是----------");
          console.log(this.currentUserInfo);

        }
      })
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 20px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}
</style>
